<template>
  <div id="app">
    <div class="main">
      <div class="banner" id="top">
        <div class="img">
          <!--      <img src="../assets/images" alt="" />-->
          <img src="../assets/images/2017122711133763131.jpg" />
        </div>
      </div>

      <div class="content-1 w-1400">
        <div class="top">
          <h2>乌镇国际未来视觉艺术计划</h2>
        </div>
        <div class="bottoml">
          <a href="#">首页</a>><a href="#">文化乌镇</a>><a href="#"
            >乌镇国际未来视觉艺术计划</a
          >
        </div>
        <hr />
      </div>
      <div class="content-2 w-1400">
        <h1>关于乌镇国际未来视觉艺术计划</h1>
        <div class="box clearfix">
          <div class="fl">
            <img src="../assets/images/2017090716150085737.png" alt="" />
          </div>

          <p class="fr">
            乌镇国际未来视觉艺术计划由文化乌镇股份有限公司、维塔工作室、421工作室共同举办，该计划由乌镇国际未来视觉高峰论坛、乌镇国际未来视觉艺术展——维塔工作室·格特博士的世界、乌镇国际未来视觉概念设计大赛、乌镇未来视界基金计划四个部分组成。乌镇国际未来视觉艺术计划旨在视觉文化全球化的语境下，围绕未来视觉文化的先锋、科技、资源、合作的课题，建立起中外深度沟通的平台，促进国际专业领域内知识、科学共享机制的完善，创立专业交流及人才的孵化保障机制，在全球视野范围内广泛讨论未来视觉文化发展多向度的可能。
          </p>
        </div>
      </div>
      <div class="content-3">
        <div class="w-1400">
          <div class="box clearfix">
            <div class="fl txt">
              <h3>乌镇国际未来视觉艺术计划主席团</h3>
              <p>陈向宏、理查德·泰勒、孙立军、陈瑜、刘向斌、肖甦、翁云鹏</p>
              <h3>乌镇国际未来视觉艺术计划学术委员会</h3>
              <p>
                江志强、葛雷格·布鲁德莫 、班纳特·沃什
                、乔·阿奎拉、俞剑红、王剑锋 、郝焉
              </p>
              <h3>乌镇国际未来视觉概念设计大赛评审委员会</h3>
              <p>
                理查德·泰勒（评委会主席）、严定宪（评委）、约翰·豪（评委）、阿什利·伍德（评委）、史蒂文·王（评委）、马超（评委）、葛雷格·布鲁德莫（评委）、肖甦（评委总执行）
              </p>
            </div>
            <div class="img fr">
              <img src="../assets/images/2018042319484779122.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="content-4 w-1400">
        <h1>乌镇未来视觉艺术计划活动</h1>
        <div class="content flex">
          <div class="left">
            <img src="../assets/images/2017092517483957888.png" alt="" />
            <h4>乌镇未来视觉艺术计划活动</h4>
            <p>
              乌镇国际未来视觉艺术计划由乌镇旅游股份有限公司总裁陈向宏、维塔工作室联合创始人理查德·泰勒、北京电影学院副院长孙立军共同发起。
            </p>
            <div class="box">
              <div class="box1"></div>
              <div class="box2">了解更多</div>
            </div>
          </div>
          <div class="right">
            <ul class="ul">
              <li class="inline_div" v-for="item in list" :key="item">
                <a class="title block pointer">
                  <div class="img">
                     <img :src="item.image" alt="" />
                  </div>
                 
                  <h4 :title="item.title">{{ item.title }}</h4>
                  <div class="box">
                    <div class="box1"></div>
                    <div class="box2">{{ item.more }}</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="hr"></div>
        <div class="bottom1">
          <h3>展览信息</h3>
          <p>地点：中国乌镇·北栅丝厂</p>
          <p>时间：2016年12月13日-2017年5月31日</p>
        </div>
      </div>
      <div class="bottom">
        <div class="box w-1400 flex">
          <div class="left">
            <span>更多精彩请浏览</span>
            <a class="pointer block" href="#">镇国际未来视觉艺术计划官方微博</a>
          </div>
          <div class="right">
            <p>微信公众号</p>
            <img src="../assets/images/2017093018182418788.png" alt="" />
          </div>
        </div>
      </div>
      <div class="gotop">
        <a href="#top">
          <img src="../assets/images/floatbtn2.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          image:"http://www.wuzhen.com.cn/uploads/cultrue/2018042407311512846.jpg",
          title: "乌镇未来视界基金计划",
          more: "了解更多",
        },
        {
          image:"http://www.wuzhen.com.cn/uploads/cultrue/2018042407311512846.jpg",
          title: "乌镇未来视界基金计划",
          more: "了解更多",
        },
        {
          image: "http://www.wuzhen.com.cn/uploads/cultrue/2018042407311512846.jpg",
          title: "乌镇未来视界基金计划",
          more: "了解更多",
        },
        {
          image:"http://www.wuzhen.com.cn/uploads/cultrue/2018042407311512846.jpg",
          title: "乌镇未来视界基金计划",
          more: "了解更多",
        },
      ],
    };
  },
  setup() {},
};
</script>


<style  scoped="scoped">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: break-all;
}
body {
  color: #000000;
  background: #fff;
  font-size: 12px;
}
/*取消链接的下划线且修改字体颜色*/
a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  color: #ba2636;
  text-decoration: underline;
}
ul,
ol {
  list-style: none;
}

/* 图片去上下空隙 */
img {
  border: none;
  vertical-align: middle;
}
/*i标签不倾斜*/
i {
  font-style: normal;
}
/* 鼠标箭头变成小手*/
.pointer {
  cursor: pointer;
}
/* 段落缩进 */
.retract {
  text-indent: 2rem;
}
/* 安全区域 */
.w-1200 {
  margin: 0 auto;
  width: 1200px;
}
.w-1400 {
  margin: 0 auto;
  width: 1400px;
}
.w-1000 {
  margin: 0 auto;
  width: 1000px;
}
.w-628 {
  margin: 0 auto;
  width: 628px;
}
/* 转换为行内块 */
.inline_div {
  display: inline-block;
}
/* 转换为块 */
.block {
  display: block;
}
/*隐藏元素*/
.hide,
.none {
  display: none;
}
/* 省略标记 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 清除浮动 */
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* 定位 */
/* 相对定位 */
.relative {
  position: relative;
}
/* 绝对定位 */
.absolute {
  position: absolute;
}
/* 粘性定位 */
.fixed {
  position: fixed;
}

/* fiex布局 */

/* 设置弹性子元素在主轴方向的布局分布 (左右) */
/* 横向 */
.flex {
  display: flex;
  display: -webkit-flex;
}
/*横向换行*/
.wrap {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
/* 右对齐 */
.justify-right {
  display: flex;
  justify-content: flex-end;
}
/*  左对齐（默认） */
.justify-ledt {
  display: flex;
  justify-content: flex-start;
}
/* 居中 */
.justify-center {
  display: flex;
  justify-content: center;
}
/*  两端对齐。且项目间间隔相等 */
.justify-between {
  display: flex;
  justify-content: space-between;
}
/*每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍 */
.justify-around {
  display: flex;
  justify-content: space-around;
}
/* 项目间间隔与项目与边框间 间隔均匀分配 */
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

/* 弹性布局主轴的方向 */
/* (默认值) 主轴水平方向，从左往右 */
.flex-row {
  display: flex;
  flex-direction: row;
}
/* 主轴水平方向的逆方向，从右往左 */
.flex-reverse {
  display: flex;
  flex-direction: row-reverse;
}
/* 主轴为垂直方向，从上往下 */
.flex-column {
  display: flex;
  flex-direction: column;
}

/* 设置弹性子元素侧轴的分布（上下) */
/* 顶对齐平均分布 */
.flex14 {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}
/* 底对齐平均分布 */
.flex15 {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}
/* 与父元素垂直中心对齐 */
.flex16 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/*三角*/
.sanjiao-top {
  display: inline-block;
  border-bottom: 8px solid #000;
  border-bottom-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.sanjiao-bottom {
  display: inline-block;
  border-top: 8px solid #000;
  border-top-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.sanjiao-left {
  display: inline-block;
  border-right: 8px solid #000;
  border-right-color: initial;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.sanjiao-right {
  display: inline-block;
  border-left: 8px solid #000;
  border-left-color: initial;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.box {
  position: relative;
  /*left: 100%;*/
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}

.box1 {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 0;
  left: -80px;
  border-bottom: #f00 3px solid;
}
.box:hover .box1 {
  left: 0px;
  transition: all 1s;
}
.box2 {
  width: 80px;
  height: 40px;
  /*background-color: #f0f;*/
}
.gotop {
  position: fixed;
  right: 50px;
  bottom: 30%;
}

.banner {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

.banner .img {
  width: 2000px;
  margin: 0 auto;
}

.banner img {
  width: 2000px;
  /* max-width: 100%;
       */
}

.content-1 {
  /* height: 200px; */
  position: relative;
  top: -50px;
}

.content-1 .top {
  width: 373px;
  padding: 7px;
  background: rgba(39, 40, 49, 0.75);
  opacity: 5;
  left: 0;
}

.content-1 .top h2 {
  color: #fff;
  font-size: 30px;
  border: solid 2px #fff;
  width: 355px;
  height: 64px;
  padding-left: 20px;
  line-height: 64px;
}

.content-1 .bottoml {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 14px;
}
.content-2 h1 {
  font-family: "SourceHanS-S_Be206bf1321a330";
  font-size: 36px;
  color: #272831;
  letter-spacing: 1.29px;
}
.content-2 .box {
  /*text-align: center;*/
  margin-top: 22px;
  /*width: 575px;*/
  margin-right: 105px;
  padding-bottom: 136px;
  padding-top: 64px;
}
.content-2 .box p {
  width: 720px;
  line-height: 30px;
  font-size: 18px;
}
.content-3 {
  background-color: #f3f4f8;
}
.content-3 .box {
  padding-top: 64px;
  padding-bottom: 64px;
}
.content-3 .box .txt {
  width: 575px;
  margin-right: 105px;
  line-height: 25px;
  font-size: 14px;
}
.content-3 .box .txt h3 {
  padding-top: 40px;
  padding-bottom: 20px;
}
.content-3 .box p {
  font-size: 15px;
  /*line-height: 20px;*/
  letter-spacing: 0.62px;
  width: 402px;
  color: #7e808a;
}
.content-3 .box .img {
  width: 720px;
  height: 430px;
}
.content-4 {
  padding-bottom: 30px;
}
.content-4 h1 {
  padding-top: 64px;
  padding-bottom: 30px;
  letter-spacing: 1.29px;
}
.content-4 .content .left {
  width: 680px;
  margin-right: 50px;
}

.content-4 .content .left img {
  width: 680px;
  height: 425px;
}
.content-4 .content .left h4 {
  font-size: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: Arial, "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  color: #272831;
  letter-spacing: 0.8px;
  line-height: 100px;
}
.content-4 .content .left p {
  font-family: Arial, "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  font-size: 18px;
  color: #7e808a;
  letter-spacing: 0.8px;
  line-height: 32px;
  height: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.views {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-family: "SourceHanS-S_Be206bf1321a330";
  letter-spacing: 0.8px;
  padding-bottom: 9px;
  border-bottom: solid 2px #272831;
  color: #272831;
  margin-top: 21px;
}

.views:hover {
  border-bottom: solid 2px #ff0000;
  cursor: pointer;
}

.views > span {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-family: "SourceHanS-S_Be206bf1321a330";
  letter-spacing: 0.8px;
  /*padding-bottom: 9px;*/
  /* border-bottom: solid 2px #272831; */
  color: #272831;
}
.content-4 .content .right .img {
overflow: hidden;
  width: 320px;
  height: 200px;
}
.content-4 .content .right img { 
  transition: all 1s;
   width: 320px;
  height: 200px;
}

.content-4 .content .right a:hover img {
  transform: scale(1.2);
}
.content-4 .content .right a {

  text-decoration: none;
  color: #000;
  
}
.content-4 .content .right h4 {
  font-size: 15px;
  padding-top: 20px;
  /*padding-bottom: 16px;*/
  letter-spacing: 0.8px;
  font-weight: 300;
}
.content-4 .content .right li {
  margin-left: 10px;
  margin-bottom: 20px;
  line-height: 34px;
}
.content-4 .hr {
  /*border-bottom:3px solid #F3F4F8;*/
  background-color: #f3f4f8;
  height: 2px;
}
.content-4 .bottom1 {
  line-height: 27px;
}

.content-4 .bottom1 h3 {
  margin-top: 30px;
}
.bottom {
  background-color: #f3f4f8;
}
.bottom .box {
  padding-top: 64px;
  padding-left: 15px;
  padding-bottom: 64px;
}
.bottom .box .left span {
  font-size: 24px;
  color: #7e808a;
  letter-spacing: 0.8px;
  line-height: 40px;
}
.bottom .box .left {
  padding-right: 170px;
}

.bottom .box .left a {
  font-family: "SourceHanS-S_Be206bf1321a330";
  font-size: 24px;
  color: #272831;
  letter-spacing: 1.37px;
  padding: 13px 47px 12px 42px;
  border: 2px solid #272831;
  background: #f3f4f8;
  margin-top: 24px;
  text-decoration: none;
}
.bottom .box .left a:hover {
  background-color: #000;
  color: #fff;
  /*height: 300px;*/
}
.bottom .box .right {
  line-height: 42px;
}
.bottom .box .right p {
  font-size: 18px;
  color: #7e808a;
}
</style>
